Creative Technologies in the Classroom: 
Programación dinámica, variables de tiempo, 

USO DE IMÁGENES, BUCLE FOR Y CONDICIONAL IF 


Colegio Seminario Diocesano de Duitama - M&T 


1. Movimiento 

La programación dinámica en processing no genera movimiento real de los elementos 
dibujados, el bucle draw dibuja n veces (definidas en 60 veces por segundo por defecto) los 
objetos, esto indica que el movimiento de los objetos en processing no es más que una 
simulación de movimiento lograda con un simple efecto conseguido con la combinación de ins- 
trucciones de dibujo y definición del background del canvas; en este ejemplo se desarrollará 
un reloj análogo en que se simulará el movimiento de las manesillas del reloj. 

Lo primero es entender cómo determinar las coordenadas polares de un punto que se mueve 
sobre una circunferencia como en la Figura 1 ; debido a que es más fácil considerar la magnitud 
del ángulo central a, las coordenadas del punto P se toman en relación a éste ángulo, son las 
llamadas coordenadas polares de P. 



Figura 1 : Movimiento del punto P sobre la circunferencia unitaria 

Puede calcularse entonces la magnitud del ángulo que recorre el extremo de cualquier 
manecilla del reloj, y debido a que uno de los extremos siempre está fijo al centro del tablero del 
reloj, las coordenadas del otro extremo se puden establecer usando las coordenadas polares 
de tal punto, así dado que hay 60 segundos en un minuto (una revolución), el ángulo que recorre 
el extremo de la manecilla del segundero cada segundo es 

2n 7r 
“ “ 60 “ 30 

luego para simular el movimiento del segundero, se dibujará una línea (segmento) cada 
segundo con un de sus extremos el centro del tablero y el otro extremo en el punto P desplazado 
sa veces, donde s es el número actual de segundos; es importante notar que cuando s = 0, 
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cos(sa) = 1 y sin(sa) = 0 lo que indica que la manecilla estaría sobre el semieje positivo de 
abscisas (ver Figura 1 ) pero en un reloj cuando s = 0 la manecilla debe estar sobre el semieje 
positivo de ordenadas, por tanto al ángulo sa hay que restarle § para conseguir la posición 
correcta de la manecilla. 

1 / * 

2 Variables enteras que definirán la longitud de la manecilla 

3 segundero, el centro del tablero y el segundo actual en el reloj 

4 interno del sistema 

5 */ 

6 i nt radioS , h , k , s ; 

7 

8 / * 

9 Variable decimal correspondiente al ángulo que recorre el segundero 

10 en s segundos 

11 */ 

12 float angleS = 0; 

13 

14 void setup () { 

15 slze (300 , 300) ; 

16 radioS = 100; // Longitud del segundero 

17 h = wldth / 2; // width determina el ancho del canvas 

18 k = height / 2; // height determina la altura del canvas 

19 } 

20 

21 void draw(){ 

22 s = second(); // second() determina el segundo actual 

23 angleS = s * Pl / 30 — Pl / 2; 

24 llne(h, k, h + radioS * cos(angleS) , k + radioS * sin ( angleS )) ; 

25 } 


La ejecución del anterior código resulta en 60 líneas como se muestra en la Figura 2 



Figura 2: Sesenta líneas de longitud 100 dibujadas una cada segundo 

para conseguir el efecto de movimiento simplemente se dibuja el background antes de 
dibujar cada nueva línea, esto puede hacerse incluyento la línea 

background(1 20) ; 
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entre las líneas 23 y 24, con lo cual se obtiene un fondo de color gris dibujado justo antes 
de dibujar la siguiente línea o segmento, esto oculta todas las líneas anteriores dejando ver 
únicamente la correspondiente línea del segundo actual. 

1.1. Hazlo tu 

Completa las manecillas del reloj, necesitaras agregar dos variables por cada manecilla 
(minutero y horario), una variable de tipo decimal (f loat) para el ángulo que recorre la mane- 
cilla en cada movimiento (minuto u hora) y una variable de tipo entero (int) para determinar 
la longitud de la manecilla; ten presente que la manecilla horaria recorre un ángulo diferente a 
las otras dos manecillas, tendrás que calcularlo. Para determinar el minuto actual en el reloj del 
sistema utilizas la variable minute(), y para la hora actual hour(). Utiliza lo que ya sabes 
de color para que cada manecilla sea de un color diferente y grozor de línea también diferen- 
te, que cada manecilla se Identifique claramente, recuerda que la más larga de las tres es el 
segundero y la más corta la manecilla horaria. 


2. El bucle for 


1 for (tipo Índice = inicio; 

2 Instrucciones a ejecutar 

3 } 


final ; incremento ) { 
índice veces; 


El bucle for ejecuta un número (índice) determinado de veces una serle de Instrucciones, 
su sintaxis Incluye una variable que puede ser de tipo entero (int) o decimal f loat que hace 
las véces de índice o contador de repeticiones, esta variable tiene un valor inicial, un valor final 
y un valor de Incremento dependiendo de si la cuenta es de menor a mayor o viceversa, e.g. 


1 f or ( i nt i = 1 ; i < 1 1 ; i ++) { 

2 println(i); 

3 } 


Imprime en la consola los números enteros de 1 a 10. 

2.1. Las divisiones del reloj 

Utilizando un blucle for, se van a dibujar las divisiones horarias en el tablero del reloj, cada 
división será una línea (segmento) de longitud 30 plxels y dado que cada división corresponde 
a una hora, éstas están separadas f una de otra. 

Incluyendo el siguiente bucle for dentro del draw, al final del código que define las mane- 
cillas del reloj se consigue un resultado como el observado en la figura 3. 

for ( f loat i = 0; i < 2 * Pl; i += Pl / 6) { 

2 I ¡ n e ( h + 100 * cos(i), k + 100 * sin(i), // 

3 h + 130 * cos(i), k + 130 * s ¡ n ( i ) ) ; 

4 } 
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Figura 3: Reloj análogo con divisiones 

Sugerencia: Ahora puedes intentar crear tus propias divisiones para el reloj, por ejemplo 
agregar las divisiones de cada minuto, deberías hacerlo con una longitud más corta y utilizando 
el mismo ángulo utilizado en la manecilla del minutero. 


3. Variación de color 

Como paso final para mejorar la apariencia del reloj se construirá un efecto de variación 
de color que hará que el color del tablero y las divisiones varíe en función de la hora del día, 
en la noche el tablero será oscuro y las divisiones claras y en el día el tablero se aclarará a 
medida que amanece y se oscurecerá progresivamente después del medio día, el color de las 
divisiones permanecerá siempre en contraste con el color del tablero. 

Lo primero es entender el modelo matemático de variación de la luz a través del día, el cual 
puede ser aproximado por la función sinusoidal 

f(t) = -255 eos (1) 

donde t esta dado en horas. Esta ecuación describe la curva 



Figura 4: Descrición gráfica del cambio de iluminación en 24 horas 

En la Figura 4 se representa un periodo completo de la curva sinusoidal con el eje x en el 
intervalo [0, 24] horas y el eje y en el rango [-255, 255] ya que la asignación de color RGB esta 
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dada en un rango de [ 0 , 255 ] (los valores negativos se tomarán como cero), la parte Interesante 
de la curva, que refleja el cambio en la Intensidad del color (luz) a medida que transcurre el día 
se encuentra entre 6 y 1 8 (en el eje horizontal), en este intervalo se ve que de 6 (am) a 1 2 (m) la 
intensidad del color (luz) va en aumento y de 12 (m) a 18 esta disminuyendo, en los intervalos 
de 0 a 6 y de 1 8 a 24 hay oscuridad luego el color debe ser negro. 

3.1. Condicional if 

1 if (condición)! 

2 instrucciones si condición es verdadera; 

3 } 

4 else{ 

5 instrucciones si condición es falsa; 

e } 

Una función if , condiciona la ejecución de una serie de instrucciones al cumplimiento de 
una o varias condiones que se determinan en el parámetro de entrada condición a través de 
los operadores condicionales o booleanos e.g. 

1 i f (x == 1 && y == 0) { 

2 println("x es uno e y es cero"); 

3 } 


en este ejemplo se comparan las variables x e y con los número 1 y 0 respectivamente y si a 
la vez x = lyy = 0se imprime un mensaje en la consola. 

La función condicional if se usará para hacer que el background cambie progresivamente 
de negro a blanco y viceversa a medida que transcurre el día, para esto es suficiente reemplazar 
la línea que define el background a gris por el código 

1 ¡f (hour() >= 6 && hour() <= 1 8 ) { 

2 background(-255 * cos(PI / 12 * hour())); 

3 } 

4 else{ 

5 background (0) ; 

e } 

en el cual se utiliza la ecuación (1) para que si la hora (hour()) esta en el intervalo [ 6 , 18 ] 
cámbie (cada hora) de gris a blanco (hasta las 1 2 m) y de blanco a gris (hasta las 1 8), si la hora 
es menor a 6 o mayor a 1 8 el background se configura en color negro. 

3.2. Hazlo tu 

Utilizando la ecuación (1 ) (modificada) y la función condicional if genera un cambio progre- 
sivo en el color de las divisiones del reloj para que permanezcan en contraste con el black- 
ground (tablero oscuro divisiones blancas y viceversa) a medida que transcurre el día. 
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4. Incluir imágenes 


Las imágenes en processing son una herramienta que permite mejorar la apariencia 
de los programas además de las funciones propias para el tratamiento de imágenes que se 
estudianrán más adelante en este mismo curso. 

El tipo de dato de processing, PImage permite cargar archivos de ¡mágen en una variable, 
ver PImage en reference/processing, 

Para poder utilizar imágenes en un sketch de processing primero deben cargarse dentro del 
directorio del sketch después de guardarlo, hacer esto es tan fácil como llevar los archivos de 
imagen desde el directorio contenedor a la ventana de processing, como se indica en la Figura 
5 



Figura 5: Cargar imágenes en un sketch de processing 

al llevar los archivos de imagen sobre la ventana de processing se creará un subdirectorio 
data en el directorio del sketch que contiene las imágenes cargadas tal como se muestra en 
la Figura 6 



Figura 6: Carpeta dada con las imánes incluidas en el sketch 
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4.1. Reloj digital 


Para construir un reloj digital se utilizarán 10 imágenes, cada una con uno de los números 
dígitos, éstas serán “almacenadas” en un vector de tipo PImage tal como se muestra en el 
siguiente código 

1 // Genera un vector tipo PImage que almacenara las Imágenes 

2 PImage im[] = new Plmage[10]; 

3 

4 // Genera un vector de tipo cadena (texto) que contiene los nombres de los 

archivos de imagen 

s Strlng im File [] = ("O.jpg", "1.jpg", "2.jpg", "3.jpg" , "4.jpg", "5.jpg", // 
e "6.jpg" , "7.jpg" , "8.jpg" , "9.jpg"}; 

7 

8 void setup () { 

9 size ( 1 40 , 285) ; 

10 

11 // carga en el vector ¡m (de tipo PImage) cada una de las Imágenes 

12 for ( ¡nt i = 0; I < 10; ¡ + + ){ 

13 im [ i ] = loadlmage( ¡mFile [ i ]) ; 

14 } 

15 } 

16 

17 void draw() { 

18 i nt s = second () ; 

19 ¡nt s_dec = i n t ( s / 10); // determina el dígito de las decenas 

20 ¡nt s_un¡ = s - s_dec * 10; // determina el dígito de las unidades 

21 

22 ¡mage(lm [s_dec] , 0, 190); // carga en el canvas el dígito de las decenas 

23 ¡mage(¡m[s_un¡] , 70, 190); // carga en el canvas el dígito de las unidades 

24 } 

4.1.1. Hazlo tu 

El reloj tiene hasta ahora únicamente los dígitos que muestran los segundos, contruye las 
variables necesarias y carga las imágenes correspondientes a los dígitos de las horas y los 
minutos. 

El resultado que debes conseguir es tal como el mostrado en la figura 



Figura 7: Reloj Digital 
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5. Programa interactivos 


El desarrollo de sketches Interactivos en processIng es una parte de este curso que se reto- 
mará a profundidad más adelante, por ahora se desarrollará una breve introducción, utilizando 
imágenes para simular botones interactivos, en este ejercicio se utilizará un botón circular, para 
ello lo siguiente es entender cómo se detectará el clic del mouse sobre el botón. 

La función mousePressed( ) detecta que uno de los botones del mouse ha sido preciona- 
do. 

Las variables de sistema mouseX y mouseY leen las coordenadas del puntero del mouse 
dentro del canvas. 

Para determinar que se ha activado el botón, en este caso, un botón circular, es necesario 
asegurarse que el puntero del mouse se encuentre ubicado sobre el botón y no fuera de su 
perímetro, para eso, en el caso de un botón circular, es necesario tener presente la ecuación 
que describe una circunferencia 


(x - h ) 2 + (y - k ) 2 = r 2 (2) 

en (2), h y k representan las coordenadas x e y del centro de la circunferencia y r el radio de 
la misma (mayores detalles sobre la ecuación de una circunferencia se estudian en un curso 
básico de geometría analítica). 

Además se utiliza una variable de tipo boolean que adopta un valor lódigo true o false 
para determinar el estado del botón, activado = true, desactivado = false. 

El siguiente código muestra un ejemplo de un botón que cambia el background del canvas. 

1 int h, k, diameter; 

2 boolean buttonState = fals( ; // variable lógica que determina el estado del 

boton 

3 Plmage button ; 

4 

5 void setup () { 

6 size (300 , 300) ; 

7 button = loadlmage (" button . png" ) ; 

8 h = width / 2; 

9 k = height / 2; 

10 diameter = 100; 
ii } 

12 

13 void draw() { 

14 ¡f (buttonState == true){ 

15 background (255) ; 

16 } 

17 else { 

18 background (0) ; 

19 } 

20 

21 image ( button , 100, 100, diameter, diameter); 

22 } 
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23 


24 // Acciones cuando se da click sobre la imagen del boton 

25 void mousePressed ( ) { 

26 ¡f ( sqrt (sq (mouseX - h) + sq(mouseY - k)) < diameter / 2 && // 

27 buttonState == false){ 

28 buttonState = true ; 

29 } 

30 else ¡f ( sqrt (sq (mouseX - h) + sq(mouseY - k)) < diameter / 2 && // 

31 buttonState == true){ 

32 buttonState = false ; 

33 } 

34 } 



Figura 8: Ejemplo de botón 


5.1. Hazto tu 

Ahora que ya has visto como utilizar el mouse para desarrollar programas interactivos pue- 
des intentar desarrollar algún programa que integre todo lo que has aprendido hasta ahora, por 
ejemplo intenta hacer un reloj que cambie entre anólogo y digital utilizando un botón, o que 
cámbie los colores de las manecillas del reloj análogo, o que cambie las imágenes que repre- 
sentan los números en el reloj digital, etc. son muchas las ¡deas que puedes desarrollar para 
aprovechar lo que ya sabes de programación en processing. 

Lie. Fausto Mauricio Lagos Suárez 

Mg. Ingeniería computacional y matemática 
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